<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true" :num="num">
			<view slot="backText">退出</view>
			<view slot="content">{{title}}作业</view>
		</cu-custom>
		<view :style="{minHeight: height - CustomBar + 'px'}" :class="[BackGroundBox]">
			<view>
				<view class="text-center fontxl">安徽巢湖华锦纺织</view>
				<view class="flex padding justify-center">
					<view class="text-center text-bold fontxs text-red">{{title}}</view>
					<view class="text-center fontxs">作业单</view>
				</view>
			</view>
			<view class="flex padding justify-between">
				<view class="text-bold">机器:{{message.LPRCTYPE}}</view>
			</view>
			<view style="position: relative;">
				<image :style="{height:scrollH + 30 + 'px',width:100 + '%'}" src="/static/images/tablebj.png" mode="aspctFill"></image>
				<view style="position: absolute;top: 0;left: 0;width: 100%;padding: 30rpx;">
					<t-table>
						<t-tr>
							<t-th>机器号</t-th>
							<t-th class="text-bold text-red">{{message.LMACHINENO}}</t-th>
							<t-th>机器规格</t-th>
							<t-th class="text-bold text-red">{{message.LMACHINETYPE}}</t-th>
						</t-tr>
						<t-tr>
							<t-th>车间</t-th>
							<t-th class="text-bold text-red">{{message.LCLASSINDEX}}</t-th>
							<t-th>工序</t-th>
							<t-th class="text-bold text-red">{{message.LTYPE}}</t-th>
						</t-tr>
						<t-tr>
							<t-th class="fontxs text-red">当前产量</t-th>
							<t-th class="text-bold text-red fontxs">{{message.lweight}}{{message.lunit}}</t-th>
						</t-tr>
						<t-tr>
							<t-th>上机人</t-th>
							<t-th class="text-bold text-red">{{userinfo.lusername}}</t-th>
							<t-th>上机时间</t-th>
							<t-th class="text-bold text-red">{{dateright}}</t-th>
						</t-tr>
					</t-table>
				</view>
			</view>
			<view v-if="isShow">
				<view class="flex padding justify-around">
					<view class=" padding-sm margin-xs radius" @tap="switchP">
						<view class="grid text-center col-1">
							<image class="image" src="/static/images/switch.png" mode="aspectFill"></image>
							<view class="text-bold padding-top-sm text-center text-black padding-bottom-xs">切换上下班</view>
						</view>
					</view>
					<view class=" padding-sm margin-xs radius" @tap="scan">
						<view class="grid text-center col-1">
							<image class="image" src="/static/images/scan.png" mode="aspectFill"></image>
							<view class="text-bold padding-top-sm text-center text-black padding-bottom-xs">扫描</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="fixed2 ">
						<view class="grid text-center col-1" @tap="Submi">
							<image class="image2" src="/static/images/Submission.png" mode="aspectFill"></image>
							<view class="text-bold padding-top-sm text-center text-black padding-bottom-xs">提交</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		outputRecord
	} from "@/service/selectList.js";
	import tTable from '@/colorui/components/t-table/t-table.vue';
	import tTh from '@/colorui/components/t-table/t-th.vue';
	import tTr from '@/colorui/components/t-table/t-tr.vue';
	import tTd from '@/colorui/components/t-table/t-td.vue';
	export default {
		data() {
			return {
				height: this.screenHeight,
				CustomBar: uni.upx2px(this.CustomBar),
				isShow: false,
				dateright: global.dateright,
				userinfo: global.userinfo,
				message: "",
				mes:'',
				lworktype:"",
				scrollH: "",
				title: '',
				lid:"",
				num: 0
			}
		},
		onLoad(option) {
			this.title = option.title
			this.lid = option.lid
			if(option.title == '上班') {
				this.lworktype = '0'
				this.mes= '上机成功！'
			} else {
				this.lworktype = '1'
				this.mes= '下机成功！'
			}
			let pages = getCurrentPages(); //当前页面栈
			console.log(pages.length);
			if (pages.length > 3) {
				this.num = pages.length - 1
			} else {
				this.num = pages.length - 2
			}
			console.log(this.num);
			console.log(uni.getStorageSync('userinfo').lusercode);
			uni.request({
				url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/api/workInquire',
				data: {
					lid: this.lid,
					lusercode:uni.getStorageSync('userinfo').lusercode
				},
				timeout:10000,
				header: {
					'token': uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.data.code == 1) {
						this.message = res.data.data
						console.log(this.message);
					} else {

					}
				},
				fail:(err) => {
					uni.showToast({
						title: '访问服务器失败！',
						icon: 'none'
					})
				}
			})
		},
		onReady() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.t-table').boundingClientRect(data => {
					this.scrollH = data.height
					this.isShow = true
				}).exec();
			})
		},
		methods: {
			switchP() {
				this.title = this.title == '上班' ? '下班' : '上班'
				this.mes = this.title== '上班'?'上机成功！':'下机成功！'
			},
			scan() {
				uni.navigateTo({
					url: `./scan?title=${this.title}`
				})
			},
			Submi() {
				console.log(this.lworktype);
				console.log(this.userinfo.lusercode);
				uni.request({
					url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/api/workRecord',
					data: {
						lmaineno:this.message.LMACHINENO,
						ltype:this.message.LTYPE,
						lworktype:this.lworktype,
						lweight:this.message.lweight,
						ltime:this.message.ltime,
						lusercode:this.userinfo.lusercode
					},
					timeout:10000,
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 1) {
							console.log(res);
							uni.showToast({
								title: this.mes,
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: this.num
								});
							},500)
						} else {
							uni.showToast({
								title: '失败！请重试！',
								icon: 'none'
							})
						}
					},
					fail:(err) => {
						uni.showToast({
							title: '访问服务器失败！',
							icon: 'none'
						})
					}
				})
			}
		},
		watch:{
			title() {
				this.lworktype = this.title == '上班' ? '0' : '1'
			}
		},
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox'])
		},
	}
</script>

<style lang="scss" scoped>
	.fontxl {
		font-size: 60rpx;
	}

	.fontxs {
		font-size: 50rpx;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
	}

	.fixed2 {

		padding-bottom: 50rpx;
	}

	.image2 {
		width: 180rpx;
		height: 180rpx;
	}

	.grid {
		justify-content: center;
	}
</style>
